<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Appbar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p>Appbar is the main app bar with actions on top of the whole app. It is designed to be used in desktop apps with Aurora theme.</p>
      </div>
      <div class="block block-strong">
        <a href="#" class="button button-fill" @click="toggleAppbar">Toggle Appbar</a>
      </div>
    </div>
  </div>
</template>
<script>
  var appbarEnabled = false;
  return {
    data: function () {
      return {
        appbarEnabled: appbarEnabled,
      };
    },
    methods: {
      enableAppbar: function () {
        var self = this;
        self.$setState({appbarEnabled: true})
        appbarEnabled = true;
        self.$app.root.prepend(`
        <div class="appbar">
          <div class="appbar-inner">
            <div class="left">
              <a href="#" class="button button-small panel-toggle display-flex" data-panel="left">
                <i class="f7-icons">bars</i>
              </a>
              <a href="#" class="button button-small display-flex margin-left-half">
                <i class="f7-icons">list</i>
              </a>
              <a href="#" class="button button-small display-flex margin-left-half">
                <i class="f7-icons">reply_fill</i>
              </a>
              <a href="#" class="button button-small display-flex margin-left-half">
                <i class="f7-icons">forward_fill</i>
              </a>
            </div>
            <div class="right">
              <div class="searchbar searchbar-inline">
                <div class="searchbar-input-wrap">
                  <input type="text" placeholder="Search app">
                  <i class="searchbar-icon"></i>
                  <div class="input-clear-button"></div>
                </div>
              </div>
            </div>

          </div>
        </div>
        `);
      },
      disableAppbar: function () {
        var self = this;
        self.$setState({appbarEnabled: false})
        appbarEnabled = false;
        self.$('.appbar').remove();
      },
      toggleAppbar: function () {
        var self = this;
        if (self.appbarEnabled) {
          self.disableAppbar();
        } else {
          self.enableAppbar();
        }
      },
    },
  }
</script>